<template>
  <div class="admin">
    <el-container>
      <el-header>
        <img
          :src="logo"
          width="50"
          style="display: inline-block; vertical-align: middle"
        />
        文章管理系统
      </el-header>
      <el-container>
        <el-aside width="200px">
          <ul>
            <li><router-link to="/admin">作者管理</router-link></li>
            <li><router-link to="/admin/article">文章管理</router-link></li>
          </ul>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import logo from "../assets/logo.png";
export default {
  data() {
    return {
      logo,
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 80px;
  height: 80px !important;
  font-weight: 800;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 40px;
  height: 600px;
  width: 200px !important;
}
.el-aside ul {
  list-style: none;
}
.el-aside ul li {
  text-decoration: none;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  line-height: 30px;
  height: 600px;
  padding: 0;
}
</style>
